<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目资料管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .prototype-container {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .prototype-box {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        h1, h2, h3 {
            color: #2c3e50;
        }
        
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        
        h2 {
            font-size: 20px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        h2 i {
            margin-right: 8px;
            color: #3498db;
        }
        
        h3 {
            font-size: 16px;
            margin: 10px 0;
        }
        
        .nav {
            display: flex;
            background-color: #2c3e50;
            padding: 10px 20px;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        
        .nav-item {
            color: #fff;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
            margin-right: 5px;
            display: flex;
            align-items: center;
        }
        
        .nav-item i {
            margin-right: 5px;
        }
        
        .nav-item:hover, .nav-item.active {
            background-color: #3498db;
        }
        
        .nav-item.logo {
            font-weight: bold;
            font-size: 18px;
            margin-right: auto;
        }
        
        .form-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .form-section {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #3498db;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .form-group {
            flex: 1;
            min-width: 200px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        
        .form-control {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 3px rgba(52, 152, 219, 0.3);
        }
        
        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        
        .form-table th, .form-table td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: center;
        }
        
        .form-table th {
            background-color: #f2f2f2;
        }
        
        .form-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: inline-flex;
            align-items: center;
            font-weight: bold;
        }
        
        .btn i {
            margin-right: 5px;
        }
        
        .btn-primary {
            background-color: #3498db;
            color: white;
        }
        
        .btn-success {
            background-color: #2ecc71;
            color: white;
        }
        
        .btn-danger {
            background-color: #e74c3c;
            color: white;
        }
        
        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
        }
        
        .btn-secondary:hover {
            background-color: #7f8c8d;
        }
        
        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .table-actions {
            display: flex;
            gap: 5px;
        }
        
        .table-actions .btn {
            padding: 4px 8px;
            font-size: 12px;
        }
        
        .preview-section {
            border: 1px solid #ddd;
            border-radius: 6px;
            margin-top: 15px;
            background-color: white;
        }
        
        .preview-header {
            display: flex;
            padding: 10px 15px;
            background-color: #f2f2f2;
            border-bottom: 1px solid #ddd;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }
        
        .preview-tab {
            padding: 8px 15px;
            cursor: pointer;
            border-radius: 4px 4px 0 0;
            font-weight: bold;
        }
        
        .preview-tab.active {
            background-color: #3498db;
            color: white;
        }
        
        .preview-content {
            padding: 15px;
            overflow-x: auto;
        }
        
        .preview-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .preview-table th, .preview-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        
        .preview-table th {
            background-color: #f2f2f2;
        }
        
        .search-box {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .search-input {
            flex: 1;
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .status-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-draft {
            background-color: #f39c12;
            color: white;
        }
        
        .status-active {
            background-color: #2ecc71;
            color: white;
        }
        
        .status-completed {
            background-color: #3498db;
            color: white;
        }
        
        .payment-status-pending {
            background-color: #e67e22;
            color: white;
        }
        
        .payment-status-paid {
            background-color: #27ae60;
            color: white;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 强制一行显示3个卡片 */
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .dashboard-card {
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            padding: 15px;
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }
        
        .dashboard-card-title {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 5px;
        }
        
        .dashboard-card-value {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .dashboard-card-footer {
            margin-top: 10px;
            font-size: 12px;
            color: #95a5a6;
        }
        
        .card-primary {
            border-top: 3px solid #3498db;
        }
        
        .card-success {
            border-top: 3px solid #2ecc71;
        }
        
        .card-warning {
            border-top: 3px solid #f39c12;
        }
        
        .card-danger {
            border-top: 3px solid #e74c3c;
        }
        
        .preview-table input.form-control,
        .preview-table select.form-control {
            padding: 4px 8px;
            font-size: 14px;
            height: auto;
            min-width: 80px;
        }
        
        .preview-table td {
            padding: 4px;
        }
        
        .form-section .action-buttons {
            margin-top: 15px;
        }
        
        .form-section .action-buttons .btn {
            margin-right: 10px;
        }
        
        input[type="month"].form-control {
            padding: 8px 10px;
            height: auto;
        }
        
        .preview-table input.form-control,
        .preview-table select.form-control {
            padding: 4px 8px;
            font-size: 14px;
            height: auto;
            min-width: 80px;
        }
        
        .preview-table td {
            padding: 4px;
        }
        
        .form-section {
            margin-bottom: 20px;
        }
        
        .status-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-pending {
            background-color: #f39c12;
            color: white;
        }
        
        .table-actions {
            display: flex;
            gap: 5px;
            white-space: nowrap;
        }
        
        .btn-sm {
            padding: 4px 8px;
            font-size: 12px;
        }
        
        .preview-table th:last-child,
        .preview-table td:last-child {
            min-width: 200px;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
        }
        
        .contract-info {
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
        }
        
        .info-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 10px;
        }
        
        .info-row:last-child {
            margin-bottom: 0;
        }
        
        .info-item {
            flex: 1;
            min-width: 250px;
        }
        
        .info-item label {
            color: #666;
            margin-right: 8px;
        }
        
        .info-item span {
            font-weight: bold;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>项目资料管理系统原型</h1>
        
        <div class="prototype-container">
            <!-- 界面1: 登录页面 -->
            <div class="prototype-box">
                <h2><i class="fas fa-sign-in-alt"></i> 登录页面</h2>
                <div style="max-width: 400px; margin: 0 auto; padding: 30px 20px; text-align: center;">
                    <div style="font-size: 60px; color: #3498db; margin-bottom: 20px;">
                        <i class="fas fa-file-contract"></i>
                    </div>
                    <h3 style="margin-bottom: 30px;">项目资料管理系统</h3>
                    <div class="form-group" style="margin-bottom: 15px; text-align: left;">
                        <label class="form-label">用户名</label>
                        <div style="display: flex; align-items: center;">
                            <span style="background-color: #f2f2f2; padding: 9px; border: 1px solid #ddd; border-right: none; border-radius: 4px 0 0 4px;">
                                <i class="fas fa-user"></i>
                            </span>
                            <input type="text" class="form-control" style="border-radius: 0 4px 4px 0;" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 25px; text-align: left;">
                        <label class="form-label">密码</label>
                        <div style="display: flex; align-items: center;">
                            <span style="background-color: #f2f2f2; padding: 9px; border: 1px solid #ddd; border-right: none; border-radius: 4px 0 0 4px;">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" class="form-control" style="border-radius: 0 4px 4px 0;" placeholder="请输入密码">
                        </div>
                    </div>
                    <button class="btn btn-primary" style="width: 100%;">
                        <i class="fas fa-sign-in-alt"></i> 登录
                    </button>
                </div>
            </div>
            
            <!-- 界面2: 系统主界面 -->
            <div class="prototype-box">
                <h2><i class="fas fa-columns"></i> 系统主界面</h2>
                <div class="nav">
                    <div class="nav-item logo">
                        <i class="fas fa-file-contract"></i> 项目资料管理系统
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-home"></i> 首页
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-project-diagram"></i> 合同基本信息
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-file-invoice-dollar"></i> 计划申报预算
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-money-check-alt"></i> 导出管理
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-cog"></i> 系统设置
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-user-circle"></i> 管理员
                    </div>
                </div>
                
                <div class="dashboard-cards">
                    <div class="dashboard-card card-primary">
                        <div class="dashboard-card-title">总项目数</div>
                        <div class="dashboard-card-value">42</div>
                        <div class="dashboard-card-footer">较上月增长 12%</div>
                    </div>
                    <div class="dashboard-card card-success">
                        <div class="dashboard-card-title">已完成项目</div>
                        <div class="dashboard-card-value">28</div>
                        <div class="dashboard-card-footer">完成率 66.7%</div>
                    </div>
                    <div class="dashboard-card card-warning">
                        <div class="dashboard-card-title">进行中项目</div>
                        <div class="dashboard-card-value">14</div>
                        <div class="dashboard-card-footer">5个即将到期</div>
                    </div>
                    <div class="dashboard-card card-primary">
                        <div class="dashboard-card-title">上月预算申报</div>
                        <div class="dashboard-card-value">12</div>
                        <div class="dashboard-card-footer">¥3,560,000</div>
                    </div>
                    <div class="dashboard-card card-success">
                        <div class="dashboard-card-title">上月预算操作</div>
                        <div class="dashboard-card-value">6</div>
                        <div class="dashboard-card-footer">归档 3 / 延续 3 / 删除 0 / 未处理 6</div>
                    </div>
                    <div class="dashboard-card card-warning">
                        <div class="dashboard-card-title">新增预算申报</div>
                        <div class="dashboard-card-value">15</div>
                        <div class="dashboard-card-footer"></div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h3><i class="fas fa-list"></i> 最近项目</h3>
                    <div class="search-box">
                        <input type="text" class="search-input" placeholder="搜索项目名称、合同编号、单位名称...">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                    <table class="form-table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>合同名称</th>
                                <th>合同金额</th>
                                <th>合同单位</th>
                                <th>状态</th>
                                <th>付款进度</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>中安联合安装一体化护卫改造项目服务合同</td>
                                <td>¥848,000</td>
                                <td>南京坤舟建设科技有限公司</td>
                                <td><span class="status-badge status-active">进行中</span></td>
                                <td><span class="status-badge payment-status-pending">50%</span></td>
                                <td>
                                    <div class="table-actions">
                                        <button class="btn btn-primary">查看</button>
                                        <button class="btn btn-success">编辑</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>中安联合信息化七合一系统信息安全测评项目服务合同</td>
                                <td>¥377,000</td>
                                <td>安正网络安全技术有限公司</td>
                                <td><span class="status-badge status-active">进行中</span></td>
                                <td><span class="status-badge payment-status-pending">75%</span></td>
                                <td>
                                    <div class="table-actions">
                                        <button class="btn btn-primary">查看</button>
                                        <button class="btn btn-success">编辑</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>中安联合人员聚集风险监测预警功能及视频监控AI智能分析开发合同</td>
                                <td>¥2,360,000</td>
                                <td>中电信数智科技有限公司</td>
                                <td><span class="status-badge status-draft">草稿</span></td>
                                <td><span class="status-badge payment-status-pending">30%</span></td>
                                <td>
                                    <div class="table-actions">
                                        <button class="btn btn-primary">查看</button>
                                        <button class="btn btn-success">编辑</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>中安联合工场一配套信息化改造项目技术服务合同</td>
                                <td>¥1,120,000</td>
                                <td>石化盈科信息技术有限责任公司南京分公司</td>
                                <td><span class="status-badge status-completed">已完成</span></td>
                                <td><span class="status-badge payment-status-paid">100%</span></td>
                                <td>
                                    <div class="table-actions">
                                        <button class="btn btn-primary">查看</button>
                                        <button class="btn btn-success">编辑</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 添加新界面: 合同管理界面 -->
            <div class="prototype-box">
                <h2><i class="fas fa-project-diagram"></i> 合同管理</h2>
                <div class="nav">
                    <div class="nav-item logo">
                        <i class="fas fa-file-contract"></i> 项目资料管理系统
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-home"></i> 首页
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-project-diagram"></i> 合同基本信息
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-file-invoice-dollar"></i> 计划申报预算
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-money-check-alt"></i> 导出管理
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-cog"></i> 系统设置
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-user-circle"></i> 管理员
                    </div>
                </div>
                
                <div class="form-container">
                    <div class="form-section">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <h3><i class="fas fa-list"></i> 合同列表</h3>
                            <button class="btn btn-primary">
                                <i class="fas fa-plus"></i> 添加合同
                            </button>
                    </div>
                    
                        <div class="search-box">
                            <input type="text" class="search-input" placeholder="搜索合同名称、合同编号、单位名称...">
                            <button class="btn btn-primary">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                        
                        <table class="form-table">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>合同名称</th>
                                    <th>合同编号</th>
                                    <th>合同类型</th>
                                    <th>合同金额</th>
                                    <th>合同单位</th>
                                    <th>装置及费用项目</th>
                                    <th>状态</th>
                                    <th>付款进度</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>中安联合安装一体化护卫改造项目服务合同</td>
                                    <td>2400004761</td>
                                    <td>技改技措</td>
                                    <td>¥848,000</td>
                                    <td>南京坤舟建设科技有限公司</td>
                                    <td>信息系统运维费</td>
                                    <td><span class="status-badge status-active">进行中</span></td>
                                    <td><span class="status-badge payment-status-pending">50%</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn btn-primary">查看</button>
                                            <button class="btn btn-success">编辑</button>
                                            <button class="btn btn-danger">删除</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>中安联合信息化七合一系统信息安全测评项目服务合同</td>
                                    <td>2400004762</td>
                                    <td>费用合同</td>
                                    <td>¥377,000</td>
                                    <td>安正网络安全技术有限公司</td>
                                    <td>安全环保费</td>
                                    <td><span class="status-badge status-active">进行中</span></td>
                                    <td><span class="status-badge payment-status-pending">75%</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn btn-primary">查看</button>
                                            <button class="btn btn-success">编辑</button>
                                            <button class="btn btn-danger">删除</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>中安联合人员聚集风险监测预警功能及视频监控AI智能分析开发合同</td>
                                    <td>2400004763</td>
                                    <td>科研开发</td>
                                    <td>¥2,360,000</td>
                                    <td>中电信数智科技有限公司</td>
                                    <td>科研开发费</td>
                                    <td><span class="status-badge status-draft">草稿</span></td>
                                    <td><span class="status-badge payment-status-pending">30%</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn btn-primary">查看</button>
                                            <button class="btn btn-success">编辑</button>
                                            <button class="btn btn-danger">删除</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>中安联合工场一配套信息化改造项目技术服务合同</td>
                                    <td>2400004764</td>
                                    <td>技改技措</td>
                                    <td>¥1,120,000</td>
                                    <td>石化盈科信息技术有限责任公司南京分公司</td>
                                    <td>信息系统运维费</td>
                                    <td><span class="status-badge status-completed">已完成</span></td>
                                    <td><span class="status-badge payment-status-paid">100%</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn btn-primary">查看</button>
                                            <button class="btn btn-success">编辑</button>
                                            <button class="btn btn-danger">删除</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>中安联合机房服务器设备维保服务合同</td>
                                    <td>2400004765</td>
                                    <td>费用合同</td>
                                    <td>¥563,000</td>
                                    <td>南京迪维数据科技有限公司</td>
                                    <td>信息系统运维费</td>
                                    <td><span class="status-badge status-active">进行中</span></td>
                                    <td><span class="status-badge payment-status-pending">60%</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn btn-primary">查看</button>
                                            <button class="btn btn-success">编辑</button>
                                            <button class="btn btn-danger">删除</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <div style="margin-top: 20px; display: flex; justify-content: center;">
                            <div style="display: flex; gap: 10px;">
                                <button class="btn btn-secondary">上一页</button>
                                <button class="btn btn-primary">1</button>
                                <button class="btn btn-secondary">2</button>
                                <button class="btn btn-secondary">3</button>
                                <button class="btn btn-secondary">下一页</button>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            <!-- 界面3: 项目创建/编辑界面 -->
            <div class="prototype-box">
                <h2><i class="fas fa-edit"></i> 项目创建/编辑界面</h2>
                <div class="nav">
                    <div class="nav-item logo">
                        <i class="fas fa-file-contract"></i> 项目资料管理系统
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-home"></i> 首页
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-project-diagram"></i> 合同基本信息
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-file-invoice-dollar"></i> 计划申报预算
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-money-check-alt"></i> 导出管理
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-cog"></i> 系统设置
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-user-circle"></i> 管理员
                    </div>
                </div>
                
                <div class="form-container">
                    <div class="form-section">
                        <h3><i class="fas fa-info-circle"></i> 基本信息</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">合同名称</label>
                                <input type="text" class="form-control" value="中安联合人员聚集风险监测预警功能及视频监控AI智能分析开发合同">
                            </div>
                            <div class="form-group">
                                <label class="form-label">合同编号</label>
                                <input type="text" class="form-control" value="2400004763">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">合同类型</label>
                                <select class="form-control">
                                    <option value="fee">费用合同</option>
                                    <option value="tech">技改技措</option>
                                    <option value="research" selected>科研开发</option>
                                    <option value="telecom">电信费用</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">项目名称</label>
                                <input type="text" class="form-control" value="人员聚集风险监测预警功能及视频监控AI智能分析开发">
                            </div>
                            <div class="form-group">
                                <label class="form-label">项目编号</label>
                                <input type="text" class="form-control" value="MHAC2500301000">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">装置及费用项目</label>
                                <select class="form-control">
                                    <option>信息系统运维费</option>
                                    <option selected>科研开发费</option>
                                    <option>通讯费</option>
                                    <option>安全环保费</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">合同金额</label>
                                <input type="number" class="form-control" value="2360000">
                            </div>
                            <div class="form-group">
                                <label class="form-label">合同状态</label>
                                <select class="form-control">
                                    <option value="draft">草稿</option>
                                    <option value="active" selected>进行中</option>
                                    <option value="completed">已完成</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <h3><i class="fas fa-building"></i> 单位信息</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">合同单位名称</label>
                                <input type="text" class="form-control" value="中电信数智科技有限公司">
                        </div>
                            <div class="form-group">
                                <label class="form-label">单位代码</label>
                                <input type="text" class="form-control" value="42709280">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">开户银行</label>
                                <input type="text" class="form-control" value="广发银行股份有限公司北京太阳宫支行">
                            </div>
                            <div class="form-group">
                                <label class="form-label">银行账号</label>
                                <input type="text" class="form-control" value="9550880244109000130">
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="action-buttons">
                        <button class="btn btn-secondary">
                            <i class="fas fa-times"></i> 取消
                        </button>
                        <button class="btn btn-success">
                            <i class="fas fa-save"></i> 保存
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-eye"></i> 预览文档
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 界面4: 文档预览界面(合同支付界面)修改 -->
            <div class="prototype-box">
                <h2><i class="fas fa-file-invoice-dollar"></i> 计划申报预算（查看界面）</h2>
                <div class="nav">
                    <div class="nav-item logo">
                        <i class="fas fa-file-contract"></i> 项目资料管理系统
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-home"></i> 首页
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-project-diagram"></i> 合同基本信息
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-file-invoice-dollar"></i> 计划申报预算
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-money-check-alt"></i> 导出管理
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-cog"></i> 系统设置
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-user-circle"></i> 管理员
                    </div>
                </div>
                
                <div class="form-container">
                    <div class="form-section">
                        <h3><i class="fas fa-search"></i> 查询条件</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">年月</label>
                                <input type="month" class="form-control" value="2024-03">
                            </div>
                            <div class="form-group">
                                <label class="form-label">合同名称</label>
                                <input type="text" class="form-control" placeholder="请输入合同名称">
                            </div>
                            <div class="form-group">
                                <label class="form-label">合同类型</label>
                                <select class="form-control">
                                    <option value="">全部</option>
                                    <option value="fee">费用合同</option>
                                    <option value="tech">技改技措</option>
                                    <option value="research">科研开发</option>
                                    <option value="telecom">电信费用</option>
                                </select>
                            </div>
                        </div>
                        <div class="action-buttons" style="justify-content: flex-start; margin-bottom: 20px;">
                            <button class="btn btn-primary">
                                <i class="fas fa-search"></i> 查询
                            </button>
                            <button class="btn btn-success">
                                <i class="fas fa-plus"></i> 新增
                            </button>
                        </div>
                    </div>
                    
                    <!-- 添加合同关联信息展示区
                    <div class="form-section">
                        <h3><i class="fas fa-link"></i> 关联合同信息</h3>
                        <div class="contract-info">
                            <div class="info-row">
                                <div class="info-item">
                                    <label>合同编号：</label>
                                    <span>2400004763</span>
                                </div>
                                <div class="info-item">
                                    <label>合同金额：</label>
                                    <span>¥2,360,000</span>
                                </div>
                                <div class="info-item">
                                    <label>已申报金额：</label>
                                    <span>¥708,000</span>
                                </div>
                                <div class="info-item">
                                    <label>剩余可申报：</label>
                                    <span>¥1,652,000</span>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    
                    <div class="preview-section">
                        <div class="preview-content">
                            <table class="preview-table">
                                <thead>
                                    <tr>
                                        <th>截至上月累计发票金额</th>
                                        <th>截至上月累计付款额</th>
                                        <th>截至上月同次款</th>
                                        <th>本月申请付款额</th>
                                        <th>调整金额</th>
                                        <th>本月审定付款额</th>
                                        <th>本月留款支付</th>
                                        <th>本月自主支付</th>
                                        <th>累计付款比率</th>
                                        <th>累计开票比率</th>
                                        <th>备注1</th>
                                        <th>次月资金预算</th>
                                        <th>次三月资金预算</th>
                                        <th>SAP10位码</th>
                                        <th>本月费用预算（不含税）</th>
                                        <th>次月费用预算（不含税）</th>
                                        <th>次三月费用预算（不含税）</th>
                                        <th>业务部门</th>
                                        <th>备注2</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>708,000</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>708,000</td>
                                        <td>0</td>
                                        <td>708,000</td>
                                        <td>0</td>
                                        <td>708,000</td>
                                        <td>30%</td>
                                        <td>30%</td>
                                        <td>首笔款</td>
                                        <td>944,000</td>
                                        <td>708,000</td>
                                        <td>MHAC2500301000</td>
                                        <td>628,319</td>
                                        <td>837,168</td>
                                        <td>628,319</td>
                                        <td>技术质量部</td>
                                        <td>科研开发费</td>
                                        <td><span class="status-badge status-pending">待处理</span></td>
                                        <td>
                                            <div class="table-actions">
                                                <button class="btn btn-success btn-sm">
                                                    <i class="fas fa-archive"></i> 归档
                                                </button>
                                                <button class="btn btn-primary btn-sm">
                                                    <i class="fas fa-sync"></i> 延续
                                                </button>
                                                <button class="btn btn-danger btn-sm">
                                                    <i class="fas fa-trash"></i> 删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> 返回
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-print"></i> 打印
                        </button>
                        <button class="btn btn-success">
                            <i class="fas fa-file-export"></i> 导出
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 修改计划申报预算创建/编辑界面 -->
            <div class="prototype-box">
                <h2><i class="fas fa-edit"></i> 计划申报预算创建/编辑界面</h2>
                <div class="nav">
                    <div class="nav-item logo">
                        <i class="fas fa-file-contract"></i> 项目资料管理系统
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-home"></i> 首页
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-project-diagram"></i> 合同基本信息
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-file-invoice-dollar"></i> 计划申报预算
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-money-check-alt"></i> 导出管理
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-cog"></i> 系统设置
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-user-circle"></i> 管理员
                    </div>
                </div>
                
                <div class="form-container">
                    <!-- 步骤1：选择关联合同 -->
                    <div class="form-section">
                        <h3><i class="fas fa-link"></i> 第一步：选择关联合同</h3>
                        <div class="form-row">
                            <div class="form-group" style="flex: 2;">
                                <label class="form-label">选择合同</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="请选择关联合同" readonly>
                                    <button class="btn btn-primary">
                                        <i class="fas fa-search"></i> 选择合同
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 步骤2：显示合同信息 -->
                    <div class="form-section">
                        <h3><i class="fas fa-info-circle"></i> 第二步：确认合同信息</h3>
                        <div class="contract-info">
                            <div class="info-row">
                                <div class="info-item">
                                    <label>合同名称：</label>
                                    <span>中安联合人员聚集风险监测预警功能及视频监控AI智能分析开发合同</span>
                                </div>
                            </div>
                            <div class="info-row">
                                <div class="info-item">
                                    <label>合同编号：</label>
                                    <span>2400004763</span>
                                </div>
                                <div class="info-item">
                                    <label>合同类型：</label>
                                    <span>科研开发</span>
                                </div>
                                <div class="info-item">
                                    <label>合同金额：</label>
                                    <span>¥2,360,000</span>
                                </div>
                            </div>
                            <div class="info-row">
                                <div class="info-item">
                                    <label>已申报金额：</label>
                                    <span>¥708,000</span>
                                </div>
                                <div class="info-item">
                                    <label>剩余可申报：</label>
                                    <span>¥1,652,000</span>
                                </div>
                                <div class="info-item">
                                    <label>合同单位：</label>
                                    <span>中电信数智科技有限公司</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 步骤3：填写预算信息 -->
                    <div class="form-section">
                        <h3><i class="fas fa-calculator"></i> 第三步：填写预算信息</h3>
                        <div class="preview-content">
                            <table class="preview-table">
                                <thead>
                                    <tr>
                                        <th>截至上月累计发票金额</th>
                                        <th>截至上月累计付款额</th>
                                        <th>截至上月同次款</th>
                                        <th>本月申请付款额</th>
                                        <th>调整金额</th>
                                        <th>本月审定付款额</th>
                                        <th>本月留款支付</th>
                                        <th>本月自主支付</th>
                                        <th>累计付款比率</th>
                                        <th>累计开票比率</th>
                                        <th>备注1</th>
                                        <th>次月资金预算</th>
                                        <th>次三月资金预算</th>
                                        <th>SAP10位码</th>
                                        <th>本月费用预算（不含税）</th>
                                        <th>次月费用预算（不含税）</th>
                                        <th>次三月费用预算（不含税）</th>
                                        <th>业务部门</th>
                                        <th>备注2</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="number" class="form-control" value="708000"></td>
                                        <td><input type="number" class="form-control" value="0"></td>
                                        <td><input type="number" class="form-control" value="0"></td>
                                        <td><input type="number" class="form-control" value="708000"></td>
                                        <td><input type="number" class="form-control" value="0"></td>
                                        <td><input type="number" class="form-control" value="708000"></td>
                                        <td><input type="number" class="form-control" value="0"></td>
                                        <td><input type="number" class="form-control" value="708000"></td>
                                        <td><input type="text" class="form-control" value="30%"></td>
                                        <td><input type="text" class="form-control" value="30%"></td>
                                        <td><input type="text" class="form-control" value="首笔款"></td>
                                        <td><input type="number" class="form-control" value="944000"></td>
                                        <td><input type="number" class="form-control" value="708000"></td>
                                        <td><input type="text" class="form-control" value="MHAC2500301000"></td>
                                        <td><input type="number" class="form-control" value="628319"></td>
                                        <td><input type="number" class="form-control" value="837168"></td>
                                        <td><input type="number" class="form-control" value="628319"></td>
                                        <td>
                                            <select class="form-control">
                                                <option selected>技术质量部</option>
                                                <option>财务部</option>
                                                <option>运营部</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control" value="科研开发费"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="action-buttons">
                        <button class="btn btn-secondary">
                            <i class="fas fa-times"></i> 取消
                        </button>
                        <button class="btn btn-success">
                            <i class="fas fa-save"></i> 保存
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-check"></i> 提交
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 界面6: 数据导出界面 -->
            <div class="prototype-box">
                <h2><i class="fas fa-file-export"></i> 数据导出界面</h2>
                <div class="nav">
                    <div class="nav-item logo">
                        <i class="fas fa-file-contract"></i> 项目资料管理系统
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-home"></i> 首页
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-project-diagram"></i> 合同基本信息
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-file-invoice-dollar"></i> 计划申报预算
                    </div>
                    <div class="nav-item active">
                        <i class="fas fa-money-check-alt"></i> 导出管理
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-cog"></i> 系统设置
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-user-circle"></i> 管理员
                    </div>
                </div>
                
                <div class="form-container">
                    <div class="form-section">
                        <h3><i class="fas fa-file-export"></i> 导出设置</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">选择项目</label>
                                <select class="form-control">
                                    <option selected>煤化工分公司财务预算表</option>
                                    <option>财务挂账、资金预算清单</option>
                                    <option>付款审批单</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">导出格式</label>
                                <select class="form-control">
                                    <option selected>Word文档(.docx)</option>
                                    <option>Excel表格(.xlsx)</option>
                                    <option>PDF文档(.pdf)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- <div class="form-section">
                        <h3><i class="fas fa-check-square"></i> 选择导出内容</h3>
                        <div style="padding: 10px;">
                            <div style="margin-bottom: 10px;">
                                <input type="checkbox" id="export_contract" checked>
                                <label for="export_contract" style="font-weight: bold; cursor: pointer;">商务合同表格</label>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <input type="checkbox" id="export_payment" checked>
                                <label for="export_payment" style="font-weight: bold; cursor: pointer;">合同支付计划表</label>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <input type="checkbox" id="export_application" checked>
                                <label for="export_application" style="font-weight: bold; cursor: pointer;">付款申请表</label>
                            </div>
                        </div>
                    </div> -->
                    
                    <div class="form-section">
                        <h3><i class="fas fa-folder"></i> 文件保存位置</h3>
                        <div class="form-row">
                            <div class="form-group" style="flex: 3;">
                                <input type="text" class="form-control" value="C:\Users\Administrator\Documents\项目文档" readonly>
                            </div>
                            <div class="form-group" style="flex: 1;">
                                <button class="btn btn-secondary" style="width: 100%;">
                                    <i class="fas fa-folder-open"></i> 浏览
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> 返回
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-file-export"></i> 导出文档
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 界面7: 导出成功提示 -->
            <div class="prototype-box">
                <h2><i class="fas fa-check-circle"></i> 导出成功提示</h2>
                <div style="max-width: 500px; margin: 0 auto; padding: 40px 20px; text-align: center;">
                    <div style="font-size: 80px; color: #2ecc71; margin-bottom: 30px;">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3 style="margin-bottom: 20px; font-size: 22px;">文档导出成功！</h3>
                    <p style="margin-bottom: 30px; color: #666;">所有文档已成功导出到指定位置</p>
                    <div style="margin-bottom: 30px; text-align: left; background-color: #f9f9f9; padding: 15px; border-radius: 6px;">
                        <p><i class="fas fa-file-word text-primary"></i> 中安联合人员聚集风险监测预警-商务合同表.docx</p>
                        <p><i class="fas fa-file-excel text-success"></i> 中安联合人员聚集风险监测预警-支付计划表.xlsx</p>
                        <p><i class="fas fa-file-pdf text-danger"></i> 中安联合人员聚集风险监测预警-付款申请表.pdf</p>
                        <p style="margin-top: 10px; color: #666;"><i class="fas fa-folder-open"></i> 保存位置：C:\Users\Administrator\Documents\项目文档</p>
                    </div>
                    <div>
                        <button class="btn btn-secondary" style="margin-right: 10px;">
                            <i class="fas fa-folder-open"></i> 打开文件夹
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-home"></i> 返回首页
                        </button>
                    </div>
                </div>
            </div>
            
            
        </div>
    </div>
    
    <script>
        // 这里可以添加所需的JavaScript代码
        // 用于原型中的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为了演示目的，可以添加一些简单的交互效果
            // 例如：点击预览标签切换内容等
            const previewTabs = document.querySelectorAll('.preview-tab');
            if (previewTabs.length > 0) {
                previewTabs.forEach(tab => {
                    tab.addEventListener('click', function() {
                        // 移除所有标签的active类
                        previewTabs.forEach(t => t.classList.remove('active'));
                        // 给当前点击的标签添加active类
                        this.classList.add('active');
                        // 在实际应用中，这里会切换内容
                    });
                });
            }
            
            // 添加合同按钮点击事件
            const addContractButtons = document.querySelectorAll('.btn-primary:has(.fa-plus)');
            if (addContractButtons.length > 0) {
                addContractButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // 实际应用中，这里会跳转到合同编辑页面
                        alert('跳转到合同编辑页面');
                    });
                });
            }
            
            // 表格中的编辑按钮点击事件
            const editButtons = document.querySelectorAll('.table-actions .btn-success');
            if (editButtons.length > 0) {
                editButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // 实际应用中，这里会跳转到合同编辑页面并加载对应合同数据
                        alert('跳转到合同编辑页面并加载该合同数据');
                    });
                });
            }
        });
    </script>
</body>
</html>
